<template>
	<view>
		<!-- 自定义导航 -->
		<news-nav-bar :tabBars="tabBars" :tabIndex="tabIndex" @changeTab="changeTab"></news-nav-bar>
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{'height': swiperHeight + 'px'}" :current="tabIndex" @change="tabChange">
				<!-- 关注 -->
				<swiper-item>
					<scroll-view scroll-y class="list" @scrolltolower="loadMoreAttention">
						<!-- 列表 -->
						<block v-for="(item,index) in attention.list" :key="index">
							<common-list :item="item" :index="index"></common-list>
						</block>
						<!-- 上拉加载 -->
						<load-more :loadtext="attention.loadtext"></load-more>
					</scroll-view>
				</swiper-item>
				<!-- 话题 -->
				<swiper-item>
					<scroll-view scroll-y class="list">
						<!-- 搜索框 -->
						<view class="search-input">
							<input class="uni-input" placeholder-class="topic-search iconfont icon-sousuo" placeholder="搜索内容" />
						</view>
						<!-- 轮播图 -->
						<swiper class="topic-swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"
						 indicator-active-color="#ff5757">
							<block v-for="(item,index) in topic.swiper" :key="index">
								<swiper-item>
									<image :src="item.scr" mode=""></image>
								</swiper-item>
							</block>
						</swiper>
						<!-- 热门分类 -->
						<news-topic-nav :nav="topic.nav"></news-topic-nav>
						<!-- 最新更新 -->
						<view class="topic-new">
							<view class="title">
								最近更新
							</view>
							<block v-for="(item,index) in topic.list" :key="index">
								<news-topic-list :item="item" :index="index"></news-topic-list>
							</block>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import commonList from "../../components/common/common-list.vue"
	import newsNavBar from "../../components/news/news-nav-bar.vue"
	import loadMore from "../../components/common/load-more.vue"
	import newsTopicNav from "../../components/news/news-topic-nav.vue"
	import newsTopicList from "../../components/news/news-topic-list.vue"
	export default {
		data() {
			return {
				swiperHeight: 500,
				tabIndex: 0,
				tabBars: [{
						name: "关注",
						id: "guanzhu"
					},
					{
						name: "话题",
						id: "huati"
					},
				],
				attention: {
					loadtext: "上拉加载更多",
					list: [
						// 文字
						{
							userpic: "../../static/image/userpic/12.jpg",
							username: "哈哈哈",
							sex: 1, // 0: 男, 1: 女
							age: 23,
							isfollow: false,
							title: "我是标题",
							titlepic: false,
							video: false,
							share: false,
							site: "深圳 龙岗",
							sharenum: 20,
							commentnum: 30,
							goodnum: 40
						},
						// 文字 + 图片
						{
							userpic: "../../static/image/userpic/12.jpg",
							username: "哈哈哈",
							sex: 0, // 0: 男, 1: 女
							age: 23,
							isfollow: false,
							title: "我是标题",
							titlepic: "../../static/image/datapic/13.jpg",
							video: false,
							share: false,
							site: "深圳 龙岗",
							sharenum: 20,
							commentnum: 30,
							goodnum: 40
						},
						// 文字 + 视频
						{
							userpic: "../../static/image/userpic/12.jpg",
							username: "哈哈哈",
							sex: 1, // 0: 男, 1: 女
							age: 23,
							isfollow: false,
							title: "我是标题",
							titlepic: "../../static/image/datapic/13.jpg",
							video: {
								playnum: "20w",
								playlong: "2:17"
							},
							share: false,
							site: "深圳 龙岗",
							sharenum: 20,
							commentnum: 30,
							goodnum: 40
						},
						// 文字 + 分享
						{
							userpic: "../../static/image/userpic/12.jpg",
							username: "哈哈哈",
							sex: 1, // 0: 男, 1: 女
							age: 23,
							isfollow: false,
							title: "我是标题",
							titlepic: false,
							video: false,
							share: {
								title: "分享标题",
								sharepic: "../../static/image/datapic/14.jpg"
							},
							site: "深圳 龙岗",
							sharenum: 20,
							commentnum: 30,
							goodnum: 40
						},
					]
				},
				topic: {
					swiper: [{
							scr: "../../static/image/banner1.jpg",
						},
						{
							scr: "../../static/image/banner2.jpg",
						},
						{
							scr: "../../static/image/banner3.jpg",
						}
					],
					nav: [{
							name: "最新",
							id: "zuixin"
						},
						{
							name: "游戏",
							id: "youxi"
						},
						{
							name: "情感",
							id: "qinggan"
						},
						{
							name: "打卡",
							id: "daka"
						},
						{
							name: "故事",
							id: "gushi"
						},
						{
							name: "喜爱",
							id: "xiai"
						},
					],
					list: [{
							titlepic: "../../static/image/topicpic/13.jpeg",
							title: "话题名称话题名称",
							desc: "我是话题描述",
							totalnum: 50,
							todaynum: 30
						},
						{
							titlepic: "../../static/image/topicpic/13.jpeg",
							title: "话题名称话题名称2",
							desc: "我是话题描述2",
							totalnum: 40,
							todaynum: 30
						},
						{
							titlepic: "../../static/image/topicpic/13.jpeg",
							title: "话题名称话题名称3",
							desc: "我是话题描述我是话题描述我是话题描述我是话题描述我是话题描述我是话题描述我是话题描述我是话题描述我是话题描述我是话题描述我是话题描述我是话题描述3",
							totalnum: 60,
							todaynum: 30
						},
						{
							titlepic: "../../static/image/topicpic/13.jpeg",
							title: "话题名称话题名称3",
							desc: "我是话题描述3",
							totalnum: 60,
							todaynum: 30
						},
						{
							titlepic: "../../static/image/topicpic/13.jpeg",
							title: "话题名称话题名称3",
							desc: "我是话题描述3",
							totalnum: 60,
							todaynum: 30
						},
						{
							titlepic: "../../static/image/topicpic/13.jpeg",
							title: "话题名称话题名称3",
							desc: "我是话题描述3",
							totalnum: 60,
							todaynum: 30
						}
					]
				}

			};
		},
		methods: {
			// 点击切换
			changeTab(index) {
				this.tabIndex = index
			},
			// 滑动
			tabChange(e) {
				this.tabIndex = e.detail.current;
			},
			// 加载更多 关注
			loadMoreAttention() {
				if (this.attention.loadtext !== "上拉加载更多") {
					return
				}
				let obj = {
					userpic: "../../static/image/userpic/12.jpg",
					username: "哈哈哈",
					sex: 1, // 0: 男, 1: 女
					age: 23,
					isfollow: false,
					title: "我是标题",
					titlepic: false,
					video: false,
					share: false,
					site: "深圳 龙岗",
					sharenum: 20,
					commentnum: 30,
					goodnum: 40
				}
				// 修改状态
				this.attention.loadtext = "拼命加载中. . ."
				setTimeout(() => {
					this.attention.list.push(obj)
					this.attention.loadtext = "上拉加载更多"
					// this.attention.loadtext = "人家是有底线的 Ծ ‸ Ծ"
				}, 1000)
			}
		},
		components: {
			newsNavBar,
			commonList,
			loadMore,
			newsTopicNav,
			newsTopicList
		},
		onLoad() {
			// 解决滚动高度问题
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100);
					this.swiperHeight = height
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.search-input {
		padding: 20upx;

		input {
			background-color: #f4f4f4;
			border-radius: 10upx;
		}

		.topic-search {
			text-align: center;
			font-size: 30upx;
		}
	}

	.topic-swiper {
		padding: 20upx;
		padding-top: 0;

		image {
			width: 100%;
			border-radius: 10upx;
		}
	}

	.topic-new {
		padding: 20upx;

		.title {
			padding-bottom: 6upx;
			font-size: 34upx;
			color: #333333;
		}
	}
</style>
